<template>
    <div class="page">
        <el-button @click="collect">刷新</el-button>
        <p>信息采集时间：{{ os_info.collect_time }}</p>
        <p>IP 地址：{{ os_info.ipaddress }}</p>
        <p>主机名称：{{ os_info.hostname }}</p>
        <p>系统版本：{{ os_info.os_release }}</p>
        <p>序列号: {{ os_info.serial_number }}</p>
        <p>系统UUID: {{ os_info.system_uuid }}</p>
        <p>开机时间：{{ os_info.uptime }}</p>

        <el-table :data="os_info.filesystem" style="width: 1000px">
            <el-table-column prop="filesystem" label="Filesystem" />
            <el-table-column prop="type" label="Type" width="60" />
            <el-table-column prop="size" label="Size" width="80" />
            <el-table-column prop="used" label="Used" width="80" />
            <el-table-column prop="avail" label="Avail" width="80" />
            <el-table-column prop="use_percent" label="Use%" width="80">
                <template #default="scope">
                    <el-text v-if="Number(scope.row.use_percent.replace('%', '')) > 80" type="danger">{{ scope.row.use_percent }}</el-text>
                    <el-text v-else >{{ scope.row.use_percent }}</el-text>
                </template>
            </el-table-column>
            <el-table-column prop="mounted" label="Mounted on" />
        </el-table>
        <p>sss</p>
    </div>

</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from "element-plus";
import * as sshApi from '@/api/ssh.js'

const { query, params } = useRoute();
const os_info = ref({})

function collect() {
    sshApi.collectOs(query.r_id).then((resp) => {
        ElMessage.success("已重新采集");
        getInfo();
    }).catch((err) => {
        ElMessage.error("采集失败")
    })
}

function getInfo() {
    sshApi.getSsh(query.r_id).then((resp) => {
        console.log(resp.data);
        os_info.value = resp.data;
    })
}
onMounted(() => {
    getInfo()
})
</script>

<style lang="less" scoped>
.page {
    height: 100%;
    overflow: visible;
}
</style>